<template>
    <div class="${module}-${lowerFirst(className)}-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
            <el-form ref="${lowerFirst(className)}DialogFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="90px">
                <el-row :gutter="35">
                    <%	for(attr in attrs){
                    if (attr.colName=="del_flag" || attr.colName=="id" || attr.colName=="create_by" || attr.colName=="create_date" || attr.colName=="update_by" || attr.colName=="update_date") continue;
                    %>
                    <%
                        if (attrs.~size >13){
                    %>
                    <el-col :span="12" class="mb20">
                        <el-form-item label="${attr.comment}" prop="${attr.name}">
                            <%
                                if (attr.dictName!=null) {
                            %>
                            <el-select v-model="state.ruleForm.${attr.name}" placeholder="请选择${attr.comment}" clearable>
                                <el-option
                                        v-for="dict in ${attr.varDictName}Dict"
                                        :key="dict.value"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                            <%}%>
                            <%
                            if (attr.dictName==null) {
                            %>
                            <el-input v-model="state.ruleForm.${attr.name}" placeholder="请输入${attr.comment}" clearable></el-input>
                            <%}%>
                        </el-form-item>
                    </el-col>
                    <%}%>
                    <%
                        if (attrs.~size <13){
                    %>
                    <el-col :span="24" class="mb20">
                        <el-form-item label="${attr.comment}" prop="${attr.name}">
                            <%
                            if (attr.dictName!=null) {
                            %>
                            <el-select v-model="state.ruleForm.${attr.name}" placeholder="请选择${attr.comment}" clearable>
                                <el-option
                                        v-for="dict in ${attr.varDictName}Dict"
                                        :key="dict.value"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                            <%}%>
                            <%
                            if (attr.dictName==null) {
                            %>
                            <el-input v-model="state.ruleForm.${attr.name}" placeholder="请输入${attr.comment}" clearable></el-input>
                            <%}%>
                        </el-form-item>
                    </el-col>
                    <%}%>
                    <%}%>
                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="${module}${className}Dialog">
    import constConfig from '/@/utils/constConfig';
    import { ${lowerFirst(className)}Api } from '/@/api/${module}/${lowerFirst(className)}';

    // 定义子组件向父组件传值/事件
    const emit = defineEmits(['refresh']);

    <% if (dictVar!=null) {%>
    const props = defineProps({
    <%	for(attr in attrs){%>
        <%
            if (attr.dictName!=null) {
        %>
        ${attr.varDictName}Dict: {
            type: Array<any>,
            default: () => [],
        },
        <%}%>
    <%}%>
    });
    <%}%>

    // 定义变量内容
    const ${lowerFirst(className)}DialogFormRef = ref();
    const state = reactive({
        ruleForm: {} as ${className}Type,
        dialog: {
            isShowDialog: false,
            type: '',
            title: '',
            submitTxt: '',
        },
        rules: {
        <%	for(attr in attrs){
            if (attr.colName=="create_by" || attr.colName=="create_date" || attr.colName=="update_by" || attr.colName=="update_date") continue;
        %>
            ${attr.name}:{ required: true, message: "${attr.comment}不能为空", trigger: "blur" },
        <%}%>
        },
    });

    // 打开弹窗
    const openDialog = (type: string, row: ${className}Type) => {
        state.dialog.type = type;
        state.dialog.isShowDialog = true;
        state.ruleForm = row;
        if (type === constConfig.dialogType.add) {
            state.dialog.title = '新增${comment}';
            state.dialog.submitTxt = '新 增';
        } else {
            state.dialog.title = '修改${comment}';
            state.dialog.submitTxt = '修 改';
        }
        nextTick(() => {
            ${lowerFirst(className)}DialogFormRef.value.clearValidate();
        });
    };
    // 关闭弹窗
    const closeDialog = () => {
        state.dialog.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
        closeDialog();
    };
    // 提交
    const onSubmit = () => {
        ${lowerFirst(className)}DialogFormRef.value.validate((valid: boolean) => {
            if (valid) {
                if (state.dialog.type === constConfig.dialogType.add) {
                    ${lowerFirst(className)}Api().save(state.ruleForm).then(() =>{
                        closeDialog();
                        emit('refresh');
                    })
                } else {
                    ${lowerFirst(className)}Api().update(state.ruleForm).then(()=>{
                        closeDialog();
                        emit('refresh');
                    })
                }
            }
        })
    };

    // 暴露变量
    defineExpose({
        openDialog,
    });
</script>
